<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="./Carousel_3D.js"></script>
    <title>Carousel_3D</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        #carousel1 {
            width: 1000px;
            height: 300px;
            margin: 20px auto;
            box-sizing: border-box;
            user-select: none;
        }

        #carousel2 {
            width: 1200px;
            height: 400px;
            margin: 20px auto;
            box-sizing: border-box;
            user-select: none;
        }

        #carousel3 {
            width: 1400px;
            height: 500px;
            margin: 20px auto;
            box-sizing: border-box;
            user-select: none;
        }
    </style>
</head>

<body>
    <div id="carousel1"></div>
    <div id="carousel2"></div>
    <div id="carousel3"></div>
    <script type="text/javascript">
        let imgs = ['./img/1.jpg', './img/2.jpg', './img/3.jpg', './img/4.jpg', './img/5.jpg']
        let hrefs = ['www.baidu.com', 'www.baidu.com', 'www.baidu.com', 'www.baidu.com', 'www.baidu.com']
        let options = {
            imgs: imgs, //图片src组（必需）
            hrefs: hrefs, //a标签href 路径
            curIndex: 0, //轮播显示的第一张图片index 默认0
            autoPlay: false, //默认true
        }
        $(function () {
            $('#carousel1').Carousel_3D(options)
            $('#carousel2').Carousel_3D({
                imgs: imgs, //图片src组（必需）
                hrefs: hrefs, //a标签href 路径
                curIndex: 1, //轮播显示的第一张图片index 默认0
                autoPlay: true, //默认true
            })
            $('#carousel3').Carousel_3D({
                imgs: imgs, //图片src组（必需）
                hrefs: hrefs, //a标签href 路径
                curIndex: 2, //轮播显示的第一张图片index 默认0
                autoPlay: true, //默认true
                interval:4000, // 轮播间隔时间 默认3000
                direction: 'turnRight' //轮播方向 向左turnLeft（默认） 或 向右turnRight
            })
        })
    </script>
</body>

</html>